@charset "utf-8";

/*通用样式*/

*{
	font-family:"PingFang SC","Open Sans","Helvetica Neue","DejaVu Sans",Arial,"Noto Sans CJK SC","Hiragino Sans GB","微软雅黑",Helvetica,sans-serif;
}

body{
	background:#e0e0e3!important;
}

h1,h2,h3,h4,h5,h6,a,p,span{
	line-height:1.5!important;
}

a{
	font-size:1.1em;
}

table{
    border-collapse:collapse;
    background-color: transparent;
    display: block;
    width: 100%;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  	border: 0;
  	margin:0 auto!important;
  	font-size:1.2em;
}

table td,th{
    border: 1px solid #ddd !important;
  	padding:15px;
  	text-align:center!important;
  	color:#000;
}

table tr th{
	background:#555;
  	border-color:#555!important;
  	color:#FAFAFA;
}

.content img{
  display:inline-block;
  height:auto;
  max-width:100%;
}

.fa-2x{
	font-size:1.5em!important;
}

/*响应式*/


/*大屏幕，高分辨率*/
@media (max-width: 1920px){
	nav a{
		text-decoration:none!important;
		color:#fff!important;
		font-size:1.1em;
		float:left;
		margin-left:15px;
		margin-right:15px;
	}

  	p{
  		font-size:1.1em;
  	}
  
	.container{
		margin-top:30px;
	}

	.bg-light{
		background:#339999!important;
		color:#fff!important;
	}

	.navbar{
		padding-left:5%!important;
		padding-right:8%!important;
	}

	.navbar-nav{
		margin-left:1%;
		margin-right:2%;
	}

	.form-group{
		margin-bottom:0px!important;
	}

	.search-form .col-md-10{
		padding-right:0px;
		padding-left:10px;
	}


	.search-form .col-md-2{
		padding-right:10px;
		padding-left:10px;
	}

	nav #search-btn{
		position:absolute;
		right:5%;
		top:15px;
	}

	.collapse{
		margin-right:15px;
	}

	.article{
		margin-bottom:30px;
	}

	.content{
		width:100%;
		height:auto;
		box-shadow: 0 4px 5px #999;
		background:#FAFAFA;
		display:block;
		padding:30px;
		outline: 1px solid #CCC;
		padding-bottom:30px;
		word-wrap:break-word;
	}

	.sidebar{
		width:100%;
		height:100%;
		background:#EEE;
		box-shadow: 0 4px 5px #999;
		outline: 1px solid #CCC;
		padding:15px;
		display:block;
		margin-left:-1px;
	}

	.col-md-9,.col-md-3{
		padding-left:0px!important;
		padding-right:0px!important;
	}

	.footer{
		margin-top:20px;
		margin-bottom:20px;
	}

	.author{
		width:100%;
		height:auto;
	}

	.author p{
		margin-top:10px;
		margin-bottom:10px;
	}

	.author img{
		width:150px;
		border-radius:50%;
      	border:2px solid #fff;
		display:block;
		margin:0 auto;
	}

	.author .links a{
		text-decoration:none;
		color:#000;
		margin:5px;
	}

	.pages{
		margin-top:30px;
		font-size:1.3em;
	}

	.pages .prev,.next{
		text-decoration:none;
		color:#000;
	}

	.pages .prev:hover,.next:hover{
		text-decoration:none;
		color:#414141;
	}

	.pages span{
		margin-left:15px;
		margin-right:15px;
	}

	article{
		padding:5%;
		border-bottom:1px solid #E0E0E0;
		word-wrap:break-word;
	}

	article .title{
		margin-bottom:10px;
	}

	article .date,.post-content-preview{
		margin-bottom:30px;
		padding-left:5%;
		font-size:1.1em;
	}

	article .more{
		margin-top:15px;
		margin-bottom:15px;
		padding-left:2%;
	}

	.article ul{
		color:#666;
		padding-left:15px;
		font-size:15px;
	}

	.article ul li{
		margin-top:10px;
		margin-bottom:10px;
	}

	.article ul li a{
		color:#62A7E9;
      	font-size:1.1em;
	}

	#rss{
		width:100px;
		display:block;
		padding:5px;
		text-align:center;
		border:1px solid #000;
		color:#666;
		float:right;
      	margin-top:10px;
      	font-size:1em;
	}

	.post .post-header{
		padding-left:3%;
	}

	.post .post-header p{
		padding-left:5%;
		font-size:1.1em;
	}

	.post .post-body{
		margin-top:30px;
		margin-bottom:30px;
	}

	.post .post-body p:first-child{
		padding-left:3%;
		margin-bottom:30px;
		font-size:1.3em;
	}

  	.post .post-body p{
		font-size:1.2em;
	}
  
	.post .post-body h2{
      	background:linear-gradient(to left, #CCC, #399);
      	color:#fff;
      	padding:5px;
		padding-left:20px;
      	border-radius:10px;
	}

  	.post .post-body p code{
  		background:linear-gradient(to left, #414141, #000);
      	border-radius:5px;
      	color:#fff;
      	padding:5px;
      	font-size:1.1em;
      	margin:5px;
      	word-break:break-all;
      	line-height:2;
  	}
  
	pre code{
		font-size:1.5em;
	}

	.error{
		width:100%;
		height:500px;
		padding:5%;
	}
  
  	.footer p{
  		font-size:1.1em;
  	}
}


/*中等屏幕，iPad 平板等设备*/
@media (max-width: 1200px){

	.navbar-brand{
		margin:0 auto!important;
	}

	.article .col-md-9{
		max-width:100%!important;
		flex:0px 0px 100%!important;
	}

	nav #search-btn{
		right:2%;
		top:15px;
	}

	nav{
		margin-bottom:10px;
	}

	.content{
		padding:35px;
	}

	.sidebar{
		display:none;
	}

	.search-form .col-md-10{
		width:75%;
		display:inline;
	}

	.search-form .col-md-2{
		width:20%;
		display:inline;
	}

	article .title{
		margin-bottom:20px;
	}
}


/*小屏幕，手机*/
@media (max-width: 768px){

	nav #search-btn{
		right:5%;
	}

	.navbar{
		padding-left:0px!important;
		padding-right:14%!important;
	}

	.navbar-collapse a{
		font-size:1.1em;
		margin-top:30px;
		margin-bottom:10px;
	}

	.container{
		margin-top:0px;
	}
  
  	.post .post-body p code{
  		word-break:break-word;
  	}
}


/*超小屏幕，小手机 如：iPhone 4s等*/
@media (max-width: 576px){

	nav #search-btn{
		right:1%;
		top:15px;
	}

	.navbar{
		padding-left:0px!important;
		padding-right:14%!important;
	}

	.navbar-collapse a{
		font-size:1em;
		margin-top:30px;
		margin-bottom:10px;
		text-align:center;
	}

	nav{
		margin-bottom:0px;
	}

	.content{
		padding:15px;
	}

	.sidebar{
		display:none;
	}

	.search-form .col-md-10{
		width:75%;
		display:inline;
	}

	.search-form .col-md-2{
		width:20%;
		display:inline;
	}

	article .title{
		margin-bottom:20px;
	}
}